<template>
    <view class="page-activity-manage">
        <u-tabs :list="tab.list" :is-scroll="false" v-model="tab.current" active-color="#24BCB8" @change="changeTab"></u-tabs>
        <view class="tab-content">
            <view class="tab-1" v-show="tab.current == 0"> 
                <view class="form-block mx-4">
                    <u-form ref="form2" label-width="160rpx">
                        <u-form-item label="活动合影" label-position="top">
                            <u-upload ref="refUploadPhoto" :action="upload.api" :header="upload.header" :file-list="upload.photo" :max-count="1" :multiple="false" :auto-upload="true"></u-upload>
                            <u-button class="btn-deepCyan" @click="editPhoto" shape="circle">更新合影</u-button>
                        </u-form-item>
                        <u-form-item label="活动人数" label-position="top" v-if="Number(form.status) < 4">
                            <view class="flex">
                                <view  class="flex-1"><u-input v-model="form.maxParticipants" placeholder="请输入" type="number" input-align="left" show-confirmbar /></view>
                                <u-button class="btn-deepCyan" @click="editParticipants" shape="circle" size="medium">修改</u-button>
                            </view>
                        </u-form-item>
                        <u-form-item label="活动封面" label-position="top">
                            <u-upload ref="refCoverImage" :deletable="false" :action="upload.api" :header="upload.header" :file-list="upload.coverImageUrl" :max-count="1" :multiple="false" :auto-upload="true"></u-upload>
                        </u-form-item>
                        <u-form-item label="活动名称" label-position="top">
                            <u-input :disabled="true" v-model="form.activitiesName" placeholder="请输入" input-align="left" />
                        </u-form-item>
                        <u-form-item label="活动详情"  label-position="top">
                            <u-input :disabled="true" v-model="form.description" placeholder="为了让大家更好地了解该活动，请介绍一下活动亮点、行程规划和注意事项等活动详情内容，限1千字" type="textarea" :auto-height="true" />
                        </u-form-item>
                        <u-form-item label="推荐语&备注"  label-position="top">
                            <u-input :disabled="true" v-model="form.recommendations" placeholder="可以填写发起想法+活动要求等，限1千字" type="textarea" :auto-height="true" />
                        </u-form-item>
                        <u-form-item :disabled="true" label="讨论问题1"  label-position="top">
                            <u-input v-model="form.discussionQuestions1" placeholder="请输入讨论问题，限100字" type="textarea" :auto-height="true" />
                        </u-form-item>
                        <u-form-item :disabled="true" label="讨论问题2"  label-position="top">
                            <u-input v-model="form.discussionQuestions2" placeholder="请输入讨论问题，限100字" type="textarea" :auto-height="true" />
                        </u-form-item>
                        <u-form-item label="讨论问题3"  label-position="top" :border-bottom="false">
                            <u-input :disabled="true" v-model="form.discussionQuestions3" placeholder="请输入讨论问题，限100字" type="textarea" :auto-height="true" />
                        </u-form-item>
                    </u-form>
                </view>                    
            </view>
            <view class="tab-2" v-show="tab.current == 1"> 
                <view class="p-4" v-if="list.sign.length == 0">
                    <u-empty text="暂无报名数据" mode="list"></u-empty>
                </view>
                <u-cell-group :border="false">
                    <u-cell-item v-for="(item,index) in list.sign" :key="index" :arrow="false">
                        <template #icon>
                            <u-image width="88rpx" height="88rpx" :src="item.appUserListVo.avatar ? proxy.$util.getFullImage(item.appUserListVo.avatar) : proxy.$icon.avatar" shape="circle" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })"></u-image>
                        </template>
                        <view slot="title" class="ml-2" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })">
                            {{ item.appUserListVo.nickname || item.appUserListVo.username }}
                            <u-icon v-if="item.role.indexOf('HOST') != -1" class="c-cyan" name="mic"></u-icon>
                        </view>
                        <u-tag class="tag-cyan" v-if="item.role.indexOf('SPEAKERS') != -1" text="最佳发言人" shape="circle"></u-tag>
                    </u-cell-item>
                </u-cell-group>
            </view>
            <view class="tab-2" v-show="tab.current == 2"> 
                <view class="p-4" v-if="list.check.length == 0">
                    <u-empty text="暂无签到数据" mode="list"></u-empty>
                </view>
                <u-cell-group :border="false">
                    <u-cell-item v-for="(item,index) in list.check" :key="index" :arrow="false">
                        <template #icon>
                            <u-image width="88rpx" height="88rpx" :src="item.appUserListVo.avatar ? proxy.$util.getFullImage(item.appUserListVo.avatar) : proxy.$icon.avatar" shape="circle" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })"></u-image>
                        </template>
                        <view slot="title" class="ml-2" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })">
                            {{ item.appUserListVo.nickname || item.appUserListVo.username }}
                            <!-- <u-icon v-if="item.role.indexOf('SPEAKERS') != -1" class="c-cyan" name="mic"></u-icon> -->
                        </view>
                    </u-cell-item>
                </u-cell-group>
            </view>
        </view>

    </view>
</template>
<script setup lang="ts">
import {apiUrl} from '@/static/js/config';
import {onShow, onLoad, onShareAppMessage} from '@dcloudio/uni-app';
import { max } from 'lodash-es';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let pageParams = reactive({});
let form = ref({});
let maxParticipants = ref(); // 原来的活动人数
let tab = reactive({
    list:[
        {name: '活动内容'},
        {name: '成员管理'},
        {name: '签到列表'},
    ],
    current: 0,
    commentList: [],
});
let list = reactive({
    sign: [],
    check: []
});
let upload = reactive({
    api: apiUrl + '/admin/sys-file/upload',
    header: {
        Authorization: `Bearer ${uni.getStorageSync('accessToken')}`,
        "TENANT-ID": 1,
        'CLIENT-TOC': 'Y'
    },
    photo: [],
    coverImageUrl: [],
    organizerWechatQrcodeUrl: [],
    groupQrcodeUrl: []
});
const refUploadPhoto = ref();
const refCoverImage = ref();
const getDetail = () => {
    proxy.$http('get', '/admin/activities/'+ pageParams.id, {}, (data,msg) => {
        form.value = data;
        maxParticipants.value = data.maxParticipants;
        upload.photo = proxy.$util.getResImageList(data.photo);
        upload.coverImageUrl = proxy.$util.getResImageList(data.coverImageUrl);
    });
};
const getList = async () => {
    list.sign = await proxy.$http('get', '/admin/activityRegistrations/getListActivities/'+ pageParams.id, {});
    list.sign = list.sign.filter(item => item.status == '0');
    list.check = await proxy.$http('get', '/admin/checkins/list/'+ pageParams.id, {});
};
const editPhoto = () => {
    let photoList = refUploadPhoto.value.lists;
    if(photoList.length == 0){
        uni.showToast({title: '请选择合影图片', icon: 'none'});
        return;
    }
    let photoArr = photoList.map(item => {
        let url;
        if(item.response){
            url = item.response.data.url;
        }else{
            let arr = item.url.split('admin');
            url = '/admin' + arr[1];
        }
        return url;        
    })
    let params = {
        activityId: form.value.id,
        photo: photoArr.join(',')
    };
    proxy.$http('put', '/admin/activities/updateActivity/photo', params, (data,msg) => {
        refUploadPhoto.value.lists = [];
        getDetail();
    })
};
const editParticipants = () => {
    if(Number(form.value.maxParticipants < Number(maxParticipants.value))){
        uni.showToast({title: '活动人数不能少于原来的', icon: 'none'});
        return;
    }
    let params = {
        id: form.value.id,
        maxParticipants: form.value.maxParticipants
    };
    proxy.$http('post', '/admin/activities/xcxUpdateActivities', params, (data,msg) => {
        uni.showModal({
            title: '提示',
            content: '修改成功',
            showCancel: false,
            success: res => {
                
            }
        })
        getDetail();
    })
};
onLoad(e => {
    pageParams = e;
    getDetail();
    getList();
})
</script>
<style>
page{height:100%;background:#fff;}
</style>